import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// //引入css 样式
import "@/assets/styles/base.css";
import "@/assets/styles/el-reset.css";
import Fragment from "vue-fragment";
//引入nprogress进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//引入subMenu组件
import qfSubMenu from "qf-sub-menu";

// import './directives/permission'
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(Fragment.Plugin);
Vue.use(qfSubMenu);
// import { Carousel,CarouselItem } from "element-ui"
//按需引入

// Vue.component('el-carousel',Carousel)
// Vue.component('el-carousel-item',CarouselItem)

//注册到全局
import bus from "./utils/bus"
import has from "./utils/has"

Vue.prototype.$has = has;
Vue.prototype.$bus = bus
//定义全局组件
Vue.directive("haspermission", {

  bind(el, binding, VNode) {
    // console.log(el)
    let buttons = localStorage.getItem("Lorenzo-permission-buttons")
    if (!has(buttons, binding.value)) {
      //禁用按钮
      // console.log(el.className)
      //先储存class类名 在这基础上加上is-disabled禁用按钮
      let className = el.className;
      el.className = className + " " + "is-disabled"
      el.disabled = true
      // console.log(el)
    }
  }
})
//路由前置钩子（导航守卫）
router.beforeEach((to, from, next) => {
  NProgress.start();
  //to and from are Route Object,next() must be called to resolve the hook}
  //用户登录之后，localstorage    中有token
  let token = localStorage.getItem("Lorenzo") || null;
  console.log(token);

  if (token) {
    //如果是注册页面或者是登录，直接放行
    if (store.state.menuList.length == 0) {
      //说明没有用户路由，触发action获取路由
      store.dispatch("FETCH_MENULIST").then(() => {
        next({ path: to.path });
        //这里要注意， next() 里面要传参数  即要进入的页面的  路由信息
        //，因为,next传参数后,当前要进入的路由会被废止,转而进入参数对应的路由,虽然是同一个路由，这么做
        //主要是为了确保addRoutes生效了。
      });
    } else {
      next();
    }
  } else {
    if (to.path === "/login") {
      next();
    } else {
      next({ path: "/login" });
    }
  }
});
//使用路由的后置钩子   来处理  面包屑的
router.afterEach((to, from) => {
  // ${//these hooks do not get a next function and cannot affect the navigation}
  console.log(to);
  let crumblist = to.matched.slice(1);
  console.log(crumblist);
  store.commit("SET_CRUMBS", crumblist);
  NProgress.done();
});
//测试调试
// import "./utils/recursionRoutes";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
